<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件案例</title>
</head>
<body>
<!--<div id="light">
    <img id="img" src="img/off.gif">
</div>
<input type="button" value="开灯" id="turnOn">
<input type="button" value="关灯" id="turnOff">
<br>
<input type="text" id="letter">
<br>
<input type="checkbox" class="c">
<input type="checkbox" class="c">
<input type="checkbox" class="c">
<br>
<input type="button" value="全选" id="checkAll">
<input type="button" value="全不选" id="checkNull">
<input type="button" value="反选" id="checkRevers">

<script>
    document.getElementById("turnOn").onclick = function () {
        document.getElementById("img").src = "img/on.gif"
    }

    document.getElementById("turnOff").onclick = function () {
        document.getElementById("img").src = "img/off.gif"
    }

    document.getElementById("letter").onfocus = function () {
        //获取之前的字母
        let letters = document.getElementById("letter").value;
        //变成小写放回去
        document.getElementById("letter").value = letters.toLowerCase()
    }

    document.getElementById("letter").onblur = function () {
        //获取之前的字母
        let letters = document.getElementById("letter").value;
        //变成小写放回去
        document.getElementById("letter").value = letters.toUpperCase()
    }

    document.getElementById("checkAll").onclick = function () {
        //获取所有的多选框
        let checkBoxes = document.getElementsByClassName("c");
        console.log(checkBoxes)
        //遍历所有多选框
        for (let i = 0; i < checkBoxes.length; i++) {
            let thisCheckBox = checkBoxes[i];
            console.log(thisCheckBox);
            thisCheckBox.checked = true;
        }
    }

    document.getElementById("checkNull").onclick = function () {
        //获取所有的多选框
        let checkBoxes = document.getElementsByClassName("c");
        console.log(checkBoxes)
        //遍历所有多选框
        for (let i = 0; i < checkBoxes.length; i++) {
            let thisCheckBox = checkBoxes[i];
            console.log(thisCheckBox);
            thisCheckBox.checked = false;
        }
    }
    document.getElementById("checkRevers").onclick = function () {
        //获取所有的多选框
        let checkBoxes = document.getElementsByClassName("c");
        console.log(checkBoxes)
        //遍历所有多选框
        for (let i = 0; i < checkBoxes.length; i++) {
            let thisCheckBox = checkBoxes[i];
            console.log(thisCheckBox);

            //获取之前的checked值
            let lastCheck = thisCheckBox.checked;
            //取反赋值
            thisCheckBox.checked = !lastCheck;
        }
    }
</script>-->

<!-------------------------------------------------------------------------->

<!--1点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡。-->
<img src="../img/off.gif" alt="灯没亮" id="light">
<br>
<button id="turnOn">打开</button>
&nbsp;&nbsp;&nbsp;
<button id="turnOff">关闭</button>
<script>
    document.getElementById("turnOn").onclick = function () {
        document.getElementById("light").src = "img/on.gif";
        flag = true;
    }
    document.getElementById("turnOff").onclick = function () {
        document.getElementById("light").src = "img/off.gif";
        flag = false;
    }

    let flag = false;

    function autoOnOff() {
        if (flag === true) {
            document.getElementById("light").src = "img/off.gif";
            flag = false;
        } else {
            document.getElementById("light").src = "img/on.gif";
            flag = true;
        }
    }

    window.setInterval(autoOnOff, 2000);//每隔两秒自动开关
</script>
<hr>
<!--2输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。-->
<input type="text" id="letter">
<script>
    document.getElementById("letter").onfocus = function () {
        document.getElementById("letter").value = document.getElementById("letter").value.toLowerCase();
    }
    document.getElementById("letter").onblur = function () {
        document.getElementById("letter").value = document.getElementById("letter").value.toUpperCase();
    }
</script>
<hr>
<!--3点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。-->
<input type="checkbox" class="box">
<input type="checkbox" class="box">
<input type="checkbox" class="box">
<br>
<input type="button" value="全选" id="checkAll">
<input type="button" value="全不选" id="checkNull">
<input type="button" value="反选" id="checkReverse">
<script>
    document.getElementById("checkAll").onclick = function () {
        let boxes = document.getElementsByClassName("box");
        for (let i = 0; i < boxes.length; i++) {
            boxes[i].checked = true;
        }
    }
    document.getElementById("checkNull").onclick = function () {
        let boxes = document.getElementsByClassName("box");
        for (let i = 0; i < boxes.length; i++) {
            boxes[i].checked = false;
        }
    }
    document.getElementById("checkReverse").onclick = function () {
        let boxes = document.getElementsByClassName("box");
        for (let i = 0; i < boxes.length; i++) {
            /*if (boxes[i].checked === true) {
                boxes[i].checked = false;
            } else {
                boxes[i].checked = true;
            }*/
            boxes[i].checked = !boxes[i].checked;
        }
    }
</script>

</body>
</html>